<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item
      v-for="(item, index) in breadList"
      :key="index"
      :to="{ path: item.path }"
      >{{ item.meta.title }}</el-breadcrumb-item
    >
  </el-breadcrumb>
</template>

<script lang="ts">
import { ref, Ref, watch } from "vue";
import { useRoute } from "vue-router";
export default {
  name: "Breadcrumb",
  setup() {
    const route = useRoute();
    //路由集合
    let breadList: Ref<any[]> = ref([]);

    getBreadcrumb();
    //获取路由集合
    function getBreadcrumb() {
      let matched: any[] = route.matched; //拿到显示的路由路径
      breadList.value = matched;
    }

    watch(
      () => route.matched,
      () => {
        getBreadcrumb();
      }
    );

    return {
      breadList,
    };
  },
};
</script>

<style scoped>
.el-breadcrumb__item {
  font-size: 1rem;
}
</style>